<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        text-align: center;
    }
    #importBillTable {
        margin:30px auto;
        width:100%;
        height:100%;
    }
    
    #deadline {
        height: 35px;
	    padding-left: 10px;
	    border: 1px solid #e6e6e6;
	    background-color: #fff;
	    border-radius: 2px;
    }
</style>
<link rel="stylesheet" href="../lib/layui-v2.1.6/layui/css/layui.css">
<body>
<table class="layui-form" id="importBillTable">
    <tr>
        <td class="layui-input-inline">
            <label class="layui-form-label">治疗项目</label>
            <div class="layui-input-inline">
                <select id="projectNameSelect" name="projectName" lay-verify="required" lay-serach="" lay-filter="projectNameSelect">
                </select>
            </div>
        </td>
    </tr>
    <tr>
        <td class="layui-input-inline">
            <label class="layui-form-label">治疗次数</label>
            <div class="layui-input-inline">
                <input type="text" name="number" class="layui-input" lay-verify="number">
            </div>
        </td>
    </tr>
    <tr>
        <td class="layui-input-inline">
            <label class="layui-form-label">费用金额</label>
            <div class="layui-input-inline">
                <input type="text" name="cost" lay-verify="number" placeholder="￥" autocomplete="off" class="layui-input"
                disabled="disabled">
            </div>
        </td>
    </tr>
    <tr>
        <td class="layui-input-inline">
            <label class="layui-form-label">截至日期</label>
            <div class="layui-input-inline">
                <input id="deadline" name="deadline" type="text" readonly>
            </div>
        </td>
    </tr>
    <tr>
        <td class="layui-input-inline">
            <label class="layui-form-label">其他备注</label>
            <div class="layui-input-inline">
                <textarea name="extraInfo" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <input id="submit" style="display:none" type="button" lay-submit lay-filter="*">
        </td>
    </tr>
</table>

</body>
<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="../lib/layui-v2.1.6/layui/layui.js"></script>
<script>
    var isSuccess=0;        //判断是否新增成功
    layui.use(['form','laydate'],function () {
        var form=layui.form;
        var $=layui.jquery;
        var laydate = layui.laydate; //调用Layui插件里的时间组件
        form.render();   //layui form表单更新渲染
        
        initFrame();     //初始化窗口数据
        resize();        //屏幕大小自适应
        listen();        //监听事件
        editData();      //编辑按钮打开此页面时获取数据并初始化
        
       	function initFrame() {  //初始化窗口
        	
       		var nowdate = new Date(); //获取当前时间
			var nowYear = nowdate.getFullYear() + "-";//获取当前年份
			nowYear += (nowdate.getMonth() + 1) + "-";
			nowYear += nowdate.getDate() + 1;
			
			laydate.render({ //执行一个laydate实例
				elem : "#deadline", //指定元素
				theme : "#55565b",
				value : nowYear,
				min : nowYear,
			});
			
        	$.ajax({
        		type : "post",
        		url : "../projectController/getAllTreatmentProject",
        		data : "",
        		success : function(response) {
        			if(response.code != 200) {
        				console.error(response);
        				return;
        			}
        			var result = response.result;
					for (var i = 0; i < result.length; i++) {
						var projectId = result[i].projectId;
						var projectName = result[i].projectName;
						var unitPrice = result[i].unitPrice;
						var name = result[i].name;
						$("#projectNameSelect").append(
								"<option value="+projectId+" unitPrice="+unitPrice+">" + projectName + "</option>");
					}
					//重绘
					form.render();
        		}
        	});
        }
      	
        function editData(){    //编辑按钮打开此页面时获取数据并初始化
            var editData=JSON.parse(localStorage.getItem("editTableData"));
            localStorage.removeItem("editTableData");
            if(editData!=null){
                $("#projectNameSelect option").eq(editData.projectId).attr("selected",true);
                $("input[name='number']").val(editData.number);
                $("input[name='cost']").val(editData.cost);
                $("textarea[name='extraInfo']").val(editData.extraInfo);
                form.render();
            }
        }
        
        function resize(){
            var bodyHeight=parent.$('#iframeHeight').val()*0.7;
            var bodyWidth=parent.$('#iframeWidth').val()*0.96;
            $('body').css({'height': '300px','width':bodyWidth}); //写死了body高度
            /* var iconSize=$(document.body).width()*0.05;
            $('.icon').css({'font-size':iconSize}); */
        }
        
        function listen(){
            form.on('submit(*)',function () {   //提交监听
                var data=formData();     //获取表单数据
                localStorage.setItem("importBillIframeData",JSON.stringify(data));  //传值
                isSuccess=200;
                $("select[name='projectName']").find("option:selected").val("");
                $("input[name='number']").val("");
                $("input[name='cost']").val("");
                $("textarea[name='extraInfo']").val("");
                form.render();
            });
        	
          
            $('input[name="number"]').change(function () {    //输入次数监听
            	//当治疗次数发生改变时,费用金额为次数乘以价格
            	var numberValue = $('input[name="number"]').val(); //次数的值
            	numberValue = vertifyNumber(numberValue); //如果有非法字符返回1;如果不存在取整数舍弃小数
            	$('input[name="number"]').val(numberValue); 
            		
                //获取治疗项目的单次价格，然后乘次数
                var unitPrice = $("#projectNameSelect option:selected").attr("unitPrice");//获取治疗项目的单次价格
                //设置费用
                $('input[name="cost"]').val(unitPrice * numberValue);
            });
            
            form.on('select(projectNameSelect)', function(data){ //治疗项目下拉栏监听事件
            	var numberValue = $('input[name="number"]').val(); //次数的值
            	numberValue = vertifyNumber(numberValue); //如果有非法字符返回1;如果不存在取整数舍弃小数
            	$('input[name="number"]').val(numberValue); 
            	
                //获取治疗项目的单次价格，然后乘次数
                var unitPrice = $("#projectNameSelect option:selected").attr("unitPrice");//获取治疗项目的单次价格
                //设置费用
                $('input[name="cost"]').val(unitPrice * numberValue);
			}); 		
        }
    });
    function formData(){        //获取表单数据
        var projectId=$("select[name='projectName']").find("option:selected").val();
        var projectName=$("select[name='projectName']").find("option:selected").text();
        var number=$("input[name='number']").val();
        var cost=$("input[name='cost']").val();
        var extraInfo=$("textarea[name='extraInfo']").val();
        var deadline = $("#deadline").val();
        var data={
            projectId:projectId,
            projectName:projectName,
            number:number,
            cost:cost,
            deadline: deadline,
            extraInfo:extraInfo
        };
        return data;
    }
    function importCureSubmit(){      //父框点击新增框的新增按钮调用此函数
        $('#submit').click();
        var is=isSuccess;
        isSuccess=0;
        return is;
    }
    
    function vertifyNumber(x) {  //验证次数输入值合法性
    	var f1 = parseFloat(x); //判断"a11"类的错误
		if (isNaN(f1)) {
			return 1;
		}
		var f2 = Math.round(x); //判断"11a"类的错误 
		if (isNaN(f2)) {
			return 1;
		}
    	return f2;
    }
</script>
</html>